<template>
	<div class="modal-container">
		<el-dialog title="开票详情" width="596px" custom-class="modal-record " :close-on-click-modal="false"
			:visible.sync="show" :before-close="on_before_close" :closed="on_closed">

			<div class="modal-inner">
				<div class="modal-ctx">
					<div class="input-box flex">
						<div class="label">开票状态</div>
						<div class="input-item">
							<div class="text">{{statusMap[info.status]}}</div>
						</div>
					</div>
					
					<div class="input-box flex">
						<div class="label">发票附件</div>
						<div class="input-item">
							<div class="text">
								<a :href="info.invoiceUrl" target="_blank">
									{{info.invoiceUrl}}
								</a>
							</div>
						</div>
					</div>
					
					
					<div class="input-box flex">
						<div class="label">发票抬头</div>
						<div class="input-item">
							<div class="text">{{titleTypeMap[info.titleType]}}</div>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">抬头</div>
						<div class="input-item">
							<div class="text">{{info.title}}</div>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">税号</div>
						<div class="input-item">
							<div class="text">{{info.shibiema}}</div>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">公司地址</div>
						<div class="input-item">
							<div class="text">{{info.companyAddress}}</div>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">公司电话</div>
						<div class="input-item">
							<div class="text">{{info.companyPhone}}</div>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">开户银行</div>
						<div class="input-item">
							<div class="text">{{info.bankName}}</div>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">银行账户</div>
						<div class="input-item">
							<div class="text">{{info.bankNo}}</div>
						</div>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="" @click="show = false">取消</el-button>
				<!-- <el-button type="primary" @click="do_submit()">确认</el-button> -->
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";

	export default {
		name: "refund-audit-modal",
		components: {

		},
		data() {
			return {
				show: false,
				info: {

				},
				statusMap: {
					1: '待开票',
					2: '已开票',
					'-1': '已作废',
				},
				
				titleTypeMap: {
					1: '个人',
					2: '单位',
				},
			};
		},
		computed: {},
		watch: {

		},
		created() {},

		methods: {
			init(row) {
				this.info = row
				this.show = true;
			},
			on_before_close() {
				this.show = false;
			},
			on_closed() {

			},
			do_submit() {

			},


		},
	};
</script>

<style scoped lang="less">
	.upload-plus {
		width: 140px;
	}

	/deep/ .el-upload {
		display: block;
		width: 200px;
		margin: 0 auto;
		margin: 0;

		.empty {
			.flex-center();
		}
	}

	/deep/ .modal-record {
		// margin-top: 80px !important;


		.modal-inner {
			padding: 0;
		}

		.el-dialog__header {
			.flex-between();
			border-bottom: 1px solid #eee;
			background: #a98c4d;
			background: #f7f7f7;
			height: 60px;
			line-height: 60px;
			padding: 0 20px;
			font-size: 18px;
			color: #333;

			.el-dialog__title {
				color: #000;
			}

			.el-dialog__headerbtn {

				// top: 0;
				.el-dialog__close {
					color: #000;
					font-size: 20px;
					font-weight: bold;
				}
			}
		}

		.el-dialog__body {
			padding: 0;
		}

		.el-dialog__footer {
			text-align: center;



		}
	}

	.modal-ctx {
		padding: 30px 50px;
		max-height: 60vh;
		overflow-y: auto;
		border-bottom: 1px solid #ddd;

		.tip {
			margin-bottom: 20px;
			color: #444;
			font-size: 14px;
		}

		.input-box {
			margin-bottom: 15px;
			position: relative;

			&.flex {
				display: flex;
				align-items: flex-start;
				// align-items: center;

				.label {
					margin-bottom: 0;
				}
			}

			.label {
				min-width: 80px;
				// margin-right: 20px;
				margin-bottom: 20px;
				font-size: 14px;
				color: #6e7285;
			}

			.input-item {
				flex: 1;
				display: flex;
				align-items: center;


				.el-input {
					width: 220px;
					width: 100%;
				}

				.el-select {
					width: 100%;
				}
			}
		}
	}

	.upload-ctx {
		margin: 20px 0;
	}

	.btn-send {}
</style>